<template>
  <div class="chart-root-wrapper">
    <div class="chart-title-wrapper">
      <div class="chart-title">打卡时间&nbsp;({{ myData.total }}h)</div>
      <div class="chart-options">
        <el-radio-group v-model="showTable" size="small">
          <el-radio :value="false">图表</el-radio>
          <el-radio :value="true">数值</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content-wrapper">
      <v-chart
        v-if="source != null && !hideChart && showChart && !showTable"
        style="width: 500px; height: 400px"
        :option="option"
        ref="chart"
      />
      <el-empty
        v-if="hideChart && !showTable"
        description="数据过大，已关闭图表"
      ></el-empty>
      <el-descriptions
        v-if="source != null && showChart && showTable"
        :column="2"
        border
        style="width: 100%"
      >
        <el-descriptions-item v-for="item in tableData" :label="item.name">
          <span>{{ item.value }}&nbsp;小时</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import dayjs from "dayjs";
import useHourStore from "@/store/hour.js";

// import echarts
import * as echarts from "echarts/core";
import { SVGRenderer, CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
// import { LegendComponent } from "echarts/components";
import { LabelLayout } from "echarts/features";
import VChart, { THEME_KEY } from "vue-echarts";

echarts.use([
  // SVGRenderer,
  CanvasRenderer,
  PieChart,
  // LegendComponent,
  LabelLayout,
]);

const hourStore = useHourStore();

const showTable = ref(false);

const showChart = ref(true);

const hideChart = computed(() => {
  if (source.value == null) {
    return false;
  } else if (
    source.value.content &&
    (source.value.count > 1000 || source.value.content.length > 1000)
  ) {
    return true;
  }
});

const handleRedraw = async () => {
  showChart.value = false;
  await nextTick();
  showChart.value = true;
};

const source = computed(() => hourStore.generalViewConfigs.source);

const tableData = computed(() => {
  let data = new Array();
  data.push(...myData.value.inner);
  data.push(...myData.value.outer);
  return data;
});

const myData = computed(() => {
  let total = 0;
  let labels = [];
  let data1 = [
    { name: "一室打卡时", value: 0, ratio: 0, selected: false },
    { name: "二室打卡时", value: 0, ratio: 0, selected: false },
  ];
  let data2 = [
    { name: "一室放单", value: 0, ratio: 0, selected: false },
    { name: "一室教员", value: 0, ratio: 0, selected: false },
    { name: "一室带班", value: 0, ratio: 0, selected: false },
    { name: "二室放单", value: 0, ratio: 0, selected: false },
    { name: "二室教员", value: 0, ratio: 0, selected: false },
    { name: "二室带班", value: 0, ratio: 0, selected: false },
  ];
  if (source.value && source.value.content) {
    for (let i = 0; i < source.value.content.length; i++) {
      let item = source.value.content[i];
      let office = matchOffice(item.userName);
      let startTime = dayjs(item.startTime);
      let endTime = item.endTime == null ? dayjs() : dayjs(item.endTime);
      let minutes = endTime.diff(startTime, "minute");
      if (office == "管制一室") {
        data1[0].value += minutes;
        if (item.seatPost == "带班主任岗") {
          data2[2].value += minutes;
        } else if (item.seatRole == "教员") {
          data2[1].value += minutes;
        } else if (item.seatRole == "放单") {
          data2[0].value += minutes;
        }
      } else if (office == "管制二室") {
        data1[1].value += minutes;
        if (item.seatPost == "带班主任岗") {
          data2[5].value += minutes;
        } else if (item.seatRole == "教员") {
          data2[4].value += minutes;
        } else if (item.seatRole == "放单") {
          data2[3].value += minutes;
        }
      }
    }

    data2[0].ratio = Math.round((data2[0].value / data1[0].value) * 100);
    data2[1].ratio = Math.round((data2[1].value / data1[0].value) * 100);
    data2[2].ratio = Math.round((data2[2].value / data1[0].value) * 100);

    data2[3].ratio = Math.round((data2[3].value / data1[1].value) * 100);
    data2[4].ratio = Math.round((data2[4].value / data1[1].value) * 100);
    data2[5].ratio = Math.round((data2[5].value / data1[1].value) * 100);

    data1[0].ratio = Math.round(
      (data1[0].value / (data1[0].value + data1[1].value)) * 100
    );
    data1[1].ratio = Math.round(
      (data1[1].value / (data1[0].value + data1[1].value)) * 100
    );

    total = parseFloat(((data1[0].value + data1[1].value) / 60).toFixed(1));

    for (let i = 0; i < data1.length; i++) {
      data1[i].value = parseFloat((data1[i].value / 60).toFixed(1));
      labels.push(data1[i].name);
    }

    for (let i = 0; i < data2.length; i++) {
      data2[i].value = parseFloat((data2[i].value / 60).toFixed(1));
      labels.push(data2[i].name);
    }

    if (data1[0].value < data1[1].value) {
      data1[0].selected = true;
    }
    if (data1[0].value > data1[1].value) {
      data1[1].selected = true;
    }
  }

  return {
    total,
    outer: data2,
    inner: data1,
    labels: labels,
  };
});

const matchOffice = (userName) => {
  if (!source.value || !source.value.users) return "";
  for (let i = 0; i < source.value.users.length; i++) {
    let user = source.value.users[i];
    if (user.name == userName) {
      return user.office;
    }
  }
  return "";
};

const option = computed(() => {
  return {
    series: [
      {
        name: "小时数比例INNER",
        type: "pie",
        radius: [0, "55%"],
        roseType: "radius",
        selectedMode: "multiple",
        label: {
          show: true,
          position: "inner",
          color: "#fff",
          textBorderColor: "rgba(0,0,0,0.25)",
          textBorderWidth: 2,
          textShadowColor: "#000",
          textShadowBlur: 10,
          fontWeight: "bold",
          formatter: "{b}\n{c}小时\n{d}%",
        },
        itemStyle: {
          borderRadius: 12,
        },
        emphasis: {
          scale: true,
          scaleSize: 12,
          focus: "self",
        },
        data: myData.value.inner,
      },
      {
        name: "小时数比例OUTER",
        type: "pie",
        radius: ["65%", "80%"],
        roseType: "radius",
        label: {
          show: true,
          color: "rgb(128,128,128)",
          fontWeight: "bold",
          width: 120,
          formatter: "{b}\n{c}小时\n{d}%",
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 20,
          smooth: true,
        },
        itemStyle: {
          borderRadius: 12,
        },
        emphasis: {
          scale: true,
          scaleSize: 12,
          focus: "self",
        },
        data: myData.value.outer,
      },
    ],
  };
});
</script>

<style scoped>
@import "./chartStyles.css";
</style>
